<template>
  <div class="workbench-notice">
    <div class="workbench-title">
      {{$t('workbench.notice')}}
    </div>
    <div class="workbench-notice-content" style="padding-top: 10px">
      <el-row class="workbench-notice-titlediv">
        <el-col :span="6" class="margin-l-10">
          <el-select v-model="publishPer" size="mini" :placeholder="$t('workbench.publishPer')" @change="handleChange">
            <el-option
               :key="1"
               :label="$t('workbench.allPublishers')"
               value="">
            </el-option>
            <el-option
              v-for="item in publishPerList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" class="margin-l-10">
          <el-date-picker
            id="noticUpdateBegin"
            v-model="publishTime"
            @change="datepickChange"
            type="datetimerange"
            size="mini"
            :picker-options="pickerOptions2"
            :placeholder="$t('workbench.publishTime')">
          </el-date-picker>
        </el-col>
        <el-col :span="8" class="margin-l-10">
          <el-input
            size="mini"
            :placeholder="$t('workbench.noticeTitle')"
            @keyup.native.enter="handlerClick"
            v-model.trim="searchTitle">
            <i
              class="el-input__icon el-icon-search"
              slot="suffix"
              @click="handlerClick">
            </i>
          </el-input>
        </el-col>
      </el-row>
      <div class="workbench-content">
        <ul v-show="noticeList">
          <li class="padding-lr-15" v-for="item in noticeList">
            <div class="title-div">
              <span class="title" style="" @click.stop="isDealog(item._id)" :class="[item.level === 'important' ? 'impor-color' : '']">{{item.title}}<span v-if="item.attachs && item.attachs.length !== 0" class="iconfont icon-fujian"></span></span>
              <div style="float: right">
                <span class="publish-agent" style="">{{getDisplayName1(item.publishAgent)}}&nbsp;|</span>
                <span class="time" style="">&nbsp;{{item.publishTime}}</span>
              </div>
            </div>
          </li>
        </ul>
        <p style="text-align: left;padding-left: 15px" v-show="noData">{{$t('workbench.noAnnouncement')}}</p>
      </div>
    </div>
    <pagination
      :small="true"
      :currentPage="currentPage"
      :count="count"
      :type="type"
      :tabType="activeName"
      :pageSize = 10
      @turnPage="turnPage"
      :customerShow="true"
      :newStyle="true"
    >
    </pagination>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll  top="10%" :title="$t('workbench.noticeDetails')" id="workbenches-notice-dialog" class="" :visible.sync="isDealogFlag">
      <div class="notice-detail">
        <div class="dialog-title">{{noticeDetail.title}}</div>
        <div class="dialog-subtitile"><span>{{$t('workbench.publishPer')}}：{{getDisplayName(noticeDetail.publishAgent)}}</span><span class="padding-l-30">{{$t('workbench.publishTime')}}：{{noticeDetail.publishTime}}</span></div>
        <div class="dialog-content">
          <textarea
            v-model="textarea1"
            class="textarea-content"
            id="textareaContent"
            readonly = "readonly"
            style="height: 150px;width: 100%;overflow-y: visible;
          resize: none;
          border: none;outline: none">
          </textarea>
          <div class="noticeImg">
            <div v-for="(file, index) in noticeDetail.attachs" v-if="noticeDetail.attachs.length" class="fujian-div">
              <!--<a :href="domain+file.id+'?attname='+file.name" download class="text-color">{{file.name}}</a>-->
              <globalPopup :url="common.getUrl(file,{useAttname: true})"
              :key="domain+file.id"
              @showBigImage="showBigImage"
              :name="file.name"
              :currObj="{url:common.getUrl(file, {noQuery: true}), id: file.id, index: index, showDelBtn: false}"
              :srcUrl="common.getUrl(file, {noQuery: true})" :imgObj="[]"></globalPopup>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import {qiniu7moorDomain} from '@/utils/qiniuUtils'
  import { common } from '@/utils/cosUrl'
  import {deepClone, getCache, timeFormat} from '@/utils/m7Utils'
  import { commitImgType2 } from '@/utils/publicMethod.js'
  export default {
    name: 'workbenchNotice',
    props: {
      random: {type: Number, default: 0}
    },
    components: {
      Pagination,
      globalPopup
    },
    data () {
      return {
        domain: qiniu7moorDomain,
        noData: true,
        textarea1: '',
        noticeDetail: {},
        noticeList: [],
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('customer.yesterday'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        isDealogFlag: false,
        activeName: 'customer_my',
        type: 'customer',
        totalPage: 1,
        count: 0,
        currentPage: 1,
        limit: 10,
        loading: true,
        searchTitle: '',
        publishTime: '',
        publishPer: '',
        publishPerList: [],
        common
      }
    },
    watch: {
    },
    methods: {
      showBigImage (data) {
        // 获取所有包含imgA的图片
        let _array = this.$el.querySelectorAll('.noticeImg .imgA')
        commitImgType2(data.url, _array)
      },
      open () {
        this.currentPage = 1
        this.fetchData1()
      },
      turnPage (val) {
        this.currentPage = val
        this.fetchData()
      },
      getDisplayName1 (agentId) {
        if (agentId) {
          let agent = getCache('agents', agentId)
          if (agent) {
            if (agent.displayName) {
              return agent.displayName
            } else {
              return agent.exten
            }
          } else {
            return this.$t('workbench.superAdministrator')
          }
        } else {
          return this.$t('workbench.superAdministrator')
        }
      },
      getDisplayName (agentId) {
        if (agentId) {
          let agent = getCache('agents', agentId)
          if (agent) {
            if (agent.displayName) {
              return '[' + agent.exten + ']' + agent.displayName
            } else {
              return '[' + agent.exten + ']' + agent.exten
            }
          } else {
            return this.$t('workbench.superAdministrator')
          }
        } else {
          return this.$t('workbench.superAdministrator')
        }
      },
      handlerClick () {
        this.currentPage = 1
        this.fetchData()
      },
      handleChange () {
        this.currentPage = 1
        this.fetchData()
      },
      datepickChange (data1) {
        this.currentPage = 1
        this.fetchData()
      },
      fetchData1: function () {
        this.$store.dispatch('getCache', {type: 'publishAgent', loadFromServer: true}).then((res) => {
          console.log('3333')
          let agent = getCache('agents')
          if (res) {
            this.publishPerList = []
            res.forEach((val, index, arr) => {
              agent.forEach((item, index1, arr1) => {
                if (val === item._id) {
                  let obj = {
                    value: val,
                    label: ''
                  }
                  if (item.displayName) {
                    obj.label = item.displayName
                    this.publishPerList.push(obj)
                  } else {
                    obj.label = item.exten
                    this.publishPerList.push(obj)
                  }
                }
              })
            })
          }
        })
        this.$store.dispatch('queryWorkbenchesNoticeData', {page: 1, limit: this.limit}).then((res) => {
          res.list && (this.noticeList = res.list)
          if (this.noticeList.length !== 0) {
            for (let i = 0; i < this.noticeList.length; i++) {
              this.noticeList[i].publishTime = timeFormat(this.noticeList[i].publishTime, 'card')
            }
          }
          this.count = res.count
          if (this.count > 0) {
            this.noData = false
          }
        })
      },
      fetchData: function () {
        console.log('1111')
        let data = {};
        (this.publishTime && this.publishTime[0]) && (data.publishTimeBegin = this.getDateFormat(deepClone(this.publishTime[0])));
        (this.publishTime && this.publishTime[1]) && (data.publishTimeEnd = this.getDateFormat(deepClone(this.publishTime[1])))
        this.searchTitle && (data.title = this.searchTitle)
        this.publishPer && (data.publishAgent = this.publishPer)
        data.page = this.currentPage
        data.limit = this.limit
        this.$store.dispatch('queryWorkbenchesNoticeData', data).then((res) => {
          this.noticeList = []
          res.list && (this.noticeList = res.list)
          if (this.noticeList.length !== 0) {
            for (let i = 0; i < this.noticeList.length; i++) {
              this.noticeList[i].publishTime = timeFormat(this.noticeList[i].publishTime, 'card')
            }
          }
          this.count = res.count
          if (this.count > 0) {
            this.noData = false
          }
        })
      },
      isDealog: function (id) {
        this.$store.dispatch('queryWorkbenchesNoticeDataById', {_id: id}).then((res) => {
          if (res && res.success) {
            this.isDealogFlag = res.success
            res.data && (this.noticeDetail = res.data)
            this.textarea1 = res.data.content
          }
        })
      },
      getDateFormat: function (date) {
        let year = date.getFullYear()
        let month = date.getMonth()
        month = month + 1 > 9 ? month + 1 : '0' + (month + 1)
        let day = date.getDate()
        day = day > 9 ? day : '0' + day
        let hour = date.getHours()
        hour = hour > 9 ? hour : '0' + hour
        let minutes = date.getMinutes()
        minutes = minutes > 9 ? minutes : '0' + minutes
        let seconds = date.getSeconds()
        seconds = seconds > 9 ? seconds : '0' + seconds
        return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
      },
      queryList: function () {}
    },
    computed: {
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'publishAgent', loadFromServer: true})
      let p2 = this.$store.dispatch('getCache', {type: 'agents'})
      Promise.all([p1, p2]).then((res) => {
        if (res) {
          res[0].forEach((val, index, arr) => {
            res[1].forEach((item, index1, arr1) => {
              if (val === item._id) {
                let obj = {
                  value: val,
                  label: ''
                }
                if (item.displayName) {
                  obj.label = item.displayName
                  this.publishPerList.push(obj)
                } else {
                  obj.label = item.exten
                  this.publishPerList.push(obj)
                }
              }
            })
          })
        }
      })
      //      this.$store.dispatch('getCache', {type: 'publishAgent', loadFromServer: true}).then((res) => {
      //        let agent = getCache('agents')
      //        console.log(res)
      //        console.log(agent)
      //        if (res) {
      //          res.forEach((val, index, arr) => {
      //            agent.forEach((item, index1, arr1) => {
      //              if (val === item._id) {
      //                let obj = {
      //                  value: val,
      //                  label: ''
      //                }
      //                if (item.displayName) {
      //                  obj.label = item.displayName
      //                  this.publishPerList.push(obj)
      //                } else {
      //                  obj.label = item.exten
      //                  this.publishPerList.push(obj)
      //                }
      //              }
      //            })
      //          })
      //        }
      //      })
      this.$store.dispatch('queryWorkbenchesNoticeData', {page: 1, limit: this.limit}).then((res) => {
        res.list && (this.noticeList = res.list)
        if (this.noticeList.length !== 0) {
          for (let i = 0; i < this.noticeList.length; i++) {
            this.noticeList[i].publishTime = timeFormat(this.noticeList[i].publishTime, 'card')
          }
        }
        this.count = res.count
        if (this.count > 0) {
          this.noData = false
        }
      })
    }
  }
</script>
<style scoped lang="stylus">
  @import "styl/_workbench.styl"
  @import "../../../assets/common.styl"
  .workbench-notice
    float left
    width calc(42% - 12px)
    margin 5px
    border 1px solid #e7e7eb
    height 404px
    background $cf-white
    position relative
    .workbench-notice-titlediv
      color $cf-gray4
    .padding-lr-15
      padding-left 15px
      padding-right 15px
    .padding-l-30
      padding-left 30px
    .float-r
      float right
    .workbench-title
      position  relative
      color $cf-gray2
    .workbench-notice-content
      .title-div
        padding-bottom 5px
        .publish-agent
          color $cf-gray6
          width: 70px;
          text-overflow: ellipsis
          overflow: hidden
          white-space: nowrap
          float: left
          text-align right
        .time
          color $cf-gray6
          width: 70px;
          white-space: nowrap;
          line-height: 17px
          display inline-block
        .title
           font-size 12px
           padding-bottom 5px
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
           height: 20px;
           float: left;
           width: calc(100% - 191px);
           color $cf-gray2
           cursor pointer
        .title:hover
           color $cf-color1
        .impor-color
           color $c-pink
        .display-name
           width 50px
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
           height: 20px;
      .workbench-content
        padding-top 15px
        li
          padding-top 6px
        li:first-child
          padding-top 0
    .margin-l-10
      margin-left 10px
    .notice-detail
       .dialog-title
         text-align center
         font-size 22px
         color $cf-gray2
         word-break break-all
       .dialog-subtitile
         color $cf-gray4
         text-align center
         margin-top 20px
         margin-bottom 15px
       .dialog-content
         padding-top 15px
         border-top 1px solid $c-border1
         color $cf-gray2
         line-height 20px
       .textarea-content:disabled
         border: none;
         background-color: $cf-white;
.icon-fujian
  padding-left 2px
  color $c-main
</style>
